<template>
  <div class="c-forget">
    <div class="c-center">
      <div class="c-c-left">
        <img @click="$router.push({path:'/'})" src="../../assets/img/logo.png" alt />
        <div v-if="nextPart">
          <p>账号</p>
          <el-input style="width:300px" v-model="account" placeholder="请输入账号">
            <el-select
                  style="width:100px"
                  v-model="area"
                  slot="prepend"
                  placeholder="请选择"
                >
                  <el-option v-for="(v,i) in allArea" :key="i" :label="v.name" :value="v.phoneCode"></el-option>
                </el-select>
          </el-input>
        </div>
        <div v-if="nextPart">
          <p>验证码</p>
          <el-input style="width:300px" placeholder="请输入验证码" v-model="code">
            
              <template slot="append">
                <el-button class="yzmStyle" @click.native="sendCode" :loading='codeStatus'>{{time}}</el-button>
              </template>
          </el-input>
        </div>
        <div v-if="!nextPart">
          <p>密码设置</p>
          <el-input type="password" v-model="password" placeholder="请输新密码"></el-input>
        </div>
        <div v-if="!nextPart">
          <p>确认密码</p>
          <el-input type="password" v-model="confirmPassword" placeholder="请确认新密码"></el-input>
        </div>
        <div class="c-c-l-btn">
          <el-button v-if="nextPart" :loading="load" @click.native="next" type="primary">下一步</el-button>
          <el-button v-else :loading="load" @click.native="submit" type="primary">完成</el-button>
        </div>
      </div>
      <div class="c-c-right">
        <p>找回密码</p>
        <p>Retrieve  <br/>password</p>
        <!-- <p>
          没有账号，
          <span @click="$router.push({path:'/register'})" style="color:#D2D0AE;cursor:pointer">注册！</span>
        </p> -->
      </div>
    </div>
  </div>
</template>
<script>
import { sendVerificationCode , forgetPasswordOne,forgetPasswordTwo,allAreaCode} from "../../api/api";
import qs from "qs";
import { format } from "highcharts";
export default {
  name: "forget",
  data() {
    return {
      account: "",
      code: "",
      allArea:[],
      area:'86',
      time:"发送验证码",
      codeStatus:false,
      load: false,
      nextPart:true,
      confirmPassword:"",
      password:"",
      id:"",
    };
  },
  created() {
    this.getAllAreaCode()
  },
  mounted() {},
  methods: {
    //获取区号
    getAllAreaCode() {
      allAreaCode().then(res => {
        this.allArea = res.data.data;
      });
    },
    sendCode(){
      if(typeof this.time =='number'){
        return false
      }
      if (this.account == "") {
        this.$notify({
          title: "警告",
          message: "请输入正确的账号！",
          type: "warning"
        });
        return false;
      }
      if(this.account.indexOf('@')>0){
        var params = {
          email:this.account,
          type :1
        }
      }else{
        var params = {
          areaNo:this.area,
          phoneNo:this.account,
          type :0
        }
      }
      this.codeStatus = true
      sendVerificationCode(qs.stringify(params)).then(res=>{
        this.codeStatus = false
        if(res.data.code == 200){
          this.$notify({
              title: "提示",
              message: "发送成功！",
              type: "success"
            });
            this.time = 60
            var timer = setInterval(()=>{
              this.time--
              if(this.time<=0){
                this.time = '发送验证码'
                clearInterval(timer)
              }
            },1000)
        }
      })
    },
    next(){
      if (this.account == "" || this.code == "") {
        this.$notify({
          title: "警告",
          message: "账号和验证码不能为空！",
          type: "warning"
        });
        return false;
      }
      this.load = true
      if(this.account.indexOf('@')>0){
        var params = {
          email:this.account,
          type :2,
          verificationCode:this.code
        }
      }else{
        var params = {
          phoneNo:this.account,
          type :1,
          verificationCode:this.code
        }
      }
      forgetPasswordOne(qs.stringify(params)).then(res=>{
        this.load = false
        if(res.data.code == 200){
          this.id = res.data.data
          this.nextPart = false
        }else{
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      })
    },
    submit() {
      this.load = true
      var params = {
        userId:this.id,
        password:this.password,
        confirmPassword:this.confirmPassword
      }
      forgetPasswordTwo(qs.stringify(params)).then(res=>{
        this.load = false
        if (res.data.code == 200) {
          this.$notify({
            title: "提示",
            message: "修改成功！",
            type: "success"
          });
          this.$router.push({path:"/login"})
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      })
    }
  }
};
</script>
<style lang='less' scope>
.yzmStyle{
  width: 150px !important;
  
}

.c-forget {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: url("../../assets/img/l1-beijing.png") no-repeat;
  background-size: cover;
  .c-center {
    max-width: 1100px;
    margin: 200px auto;
    // border: 1px solid red;
    position: relative;
    .c-c-left {
      width: 800px;
      background-color: #fff;
      padding: 50px 140px 30px 100px;
      position: relative;
      > img:nth-of-type(1) {
        margin-bottom: 40px;
        cursor: pointer;
      }
      > div {
        font-size: 16px;
        color: #334d50;
        margin-bottom: 40px;
        > p {
          margin-bottom: 15px;
        }
      }
      > .c-c-l-btn {
        position: absolute;
        bottom: -60px;
        .el-button {
          border-radius: 40px;
          // padding: 10px 60px;
        }
        .el-button--primary {
          background-color: #0a9187;
          border-color: #0a9187;
        }
      }
    }
    .c-c-right {
      position: absolute;
      left: 750px;
      top: 80px;
      background-color: #0a9187;
      color: #fff;
      padding: 80px 50px 50px;
      > p {
        font-size: 20px;
        margin-bottom: 15px;
      }
      > p:nth-of-type(2) {
        font-size: 24px;
        
      }
      > p:nth-of-type(3) {
        font-size: 14px;
        margin-top: 30px;
        margin-bottom: 0;
      }
    }
  }
  
}
</style>